<template>
	<div id="app">
		<transition name="translation">
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		name: 'app',
		created() {

		}
	}
</script>

<style>
	.mui-margin-top {
		margin-top: 15px;
	}
	
	.mui-table-view .mui-pull-right {
		color: #999;
	}
	
	.translation-enter-active,
	.translation-leave-active {
		transition: margin-left 200ms;
	}
	
	.translation-enter {
		margin-left: 0;
		display: none;
	}
	
	.translation-leave-active {
		margin-left: -100%;
		display: block;
	}
	
	.panel {
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
		animation: 200ms translation;
	}
	
	@keyframes translation {
		0% {
			left: 100%;
			display: none;
		}
		90%{
			left: 0%;
			display: none;
		}
		100% {
			display: block;
		}
	}
</style>